import React, {Component} from "react";
import {observer, inject} from 'mobx-react';
import QuerySuccess from "./QuerySuccess";
import QueryFail from "./QueryFail";
import {observable, action} from "mobx";

@inject("queryStore")
@observer
class AccurateQuery extends Component {
    constructor(props) {
        super(props);
        this.QueryDeatilModel = this.props.queryStore.getModel();
        this.handleChange = this.handleChange.bind(this);
        this.handleQueryClick = this.handleQueryClick.bind(this);
    }

    componentDidMount() {
        // this.props.queryStore.setAccurateQuery(true);
        this.props.queryStore.setFlag(-1);
        this.props.queryStore.setNewModel();
    }

    isEmpty = (obj) => {
        for (var name in obj) {
            return false;
        }
        return true;
    };

    handleQueryClick = () => {
        const {graduateYear, majorName, classes, name} = this.QueryDeatilModel;
        if (this.isEmpty(graduateYear)) {
            alert("毕业年份不能为空");
            return;
        }
        if (this.isEmpty(majorName)) {
            alert("专业不能为空");
            return;
        }
        if (this.isEmpty(classes)) {
            alert("班级不能为空");
            return;
        }
        if (this.isEmpty(name)) {
            alert("姓名不能为空");
            return;
        }
        // this.props.queryStore.setModel(this.QueryDeatilModel);
        this.props.queryStore.fetchQueryByAccurate(this.QueryDeatilModel);
        // this.props.queryStore.setAccurateQuery(true);
        this.props.queryStore.setNewModel()
    };

    @action handleChange(e) {
        switch (e.target.name) {
            case "graduateYear":
                this.QueryDeatilModel.graduateYear = e.target.value;
                break;
            case "majorName":
                this.QueryDeatilModel.majorName = e.target.value;
                break;
            case "classes":
                this.QueryDeatilModel.classes = e.target.value;
                break;
            case "name":
                this.QueryDeatilModel.name = e.target.value;
                break;
        }
    }

    render() {
        if (this.props.queryStore.flag===-1) {
            const {graduateYear, majorName, classes, name} = this.props.queryStore.queryDetailModel;
            return (
                <div className="AccurateQuery">
                    <div className="Title">精准查询</div>
                    <div>
                        <span>毕业年份：</span>
                        <select value={graduateYear} name="graduateYear" onChange={this.handleChange}>
                            <option value="" selected>--请选择年份--</option>
                            <option value="2006">2006</option>
                            <option value="2007">2007</option>
                            <option value="2008">2008</option>
                            <option value="2009">2009</option>
                            <option value="2010">2010</option>
                            <option value="2011">2011</option>
                            <option value="2012">2012</option>
                            <option value="2013">2013</option>
                            <option value="2014">2014</option>
                            <option value="2015">2015</option>
                            <option value="2016">2016</option>
                            <option value="2017">2017</option>
                            <option value="2018">2018</option>
                            <option value="2019">2019</option>
                        </select>
                    </div>
                    <div>
                        <span>专业：</span>
                        <select value={majorName} name="majorName" onChange={this.handleChange}>
                            <option value="" selected>--请选择专业--</option>
                            <option value="计算机科学与技术">计算机科学与技术</option>
                            <option value="网络工程">网络工程</option>
                            <option value="物联网工程">物联网工程</option>
                            <option value="信息安全">信息安全</option>
                            <option value="软件工程">软件工程</option>
                        </select>
                    </div>
                    <div>
                        <span>班级：</span>
                        <input type="text" value={classes} name="classes" placeholder="如：16计算机3班" onChange={this.handleChange}/>
                    </div>
                    <div>
                        <span>姓名：</span>
                        <input type="text" value={name} name="name" onChange={this.handleChange}/>
                    </div>
                    <div>
                        <button onClick={this.handleQueryClick} className="query_btn">查询</button>
                    </div>
                </div>
            )
        } else if (this.props.queryStore.flag===1) {
            return (
                <div>
                    <QuerySuccess results={this.props.queryStore.results}/>
                </div>
            )
        }
        else {
            return (
                <div>
                    <QueryFail queryStore={this.props.queryStore}/>
                </div>
            )
        }
    }
}

export default AccurateQuery;